<template>
    <div class="header">登录</div>
    <div class="container">
        <p class="title">律师App</p>
        <van-field v-model="value" placeholder="请输入11位手机号" />
        <div class="code-box">
            <van-field v-model="value2" placeholder="请输入手机验证码" />
            <p>发送验证码</p>
        </div>
        <div class="forget">
            <p>立即注册</p>
            <p>忘记密码</p>
        </div>
        <p class="login" @click="login">登录</p>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const value = ref('')
const value2  = ref('')
function login() {
    router.push('/my')
}

</script>
<style scoped lang="less">
.header{
    width:100%;
    height:60px;
    color:white;
    background:#5A63AE;
    display:flex;
    align-items: center;
    justify-content: center
}
.container{
    text-align: center;
    padding:0 15px;
    .title{
        margin-top:100px;
        margin-bottom:60px;
        font-size:26px;
        color:#5A63AE;
        font-weight:bold;
    }
}
/deep/.van-field{
    height:60px;
    display:flex;
    align-items: center;
}
.code-box{
    display:flex;
    align-items: center;
    margin-top:20px;
    p{
        width:200px;
        background:#5A63AE;
        color:white;
        height:60px;
        display:flex;
        align-items: center;
        justify-content: center;
    }
}
.login{
    width:100%;
    background:#5A63AE;
    color:white;
    padding:15px 0;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-top:40px;
}
.forget{
    width:100%;
    display:flex;
    justify-content: space-between;
    margin:10px 0;
    color:gray;
}

</style>